<!DOCTYPE html>
<html lang="en"><head>
  <meta charset="utf-8">
  <title>onclick事件</title>
</head>
<body>
  
<button onclick="clickHandler()">htmlOnClickHandler</button>
<button click="clickHandler()">html元素不加on不会触发事件</button>
<button onclick="function clickHandler(){
  alert('我是在html元素的onlclick属性写的函数代码'); // 但是不推荐这么写 因为这样不利于维护 易读性也不好
}
clickHandler();
">htmlOnClick</button>
<button id="jsOnClick">jsOnClick</button>
<button id="addEventListener">addEventListener</button>
<button id="addEventListener1">addEventListener1</button>
  
<script>
// JQ点击事件的写法
/**
$(function(){
  $("button").click(function(){
   alert("JQ click 事件");
  });
});
**/

// 原生js有三种可以触发onclick事件（所有HTML元素都支持onclick事件）

// 第一种 在html中使用onclick属性
function clickHandler() {
  alert("我是调用clickHandler函数哦");
}

//第二种 在javascript中，使用onclick属性
document.getElementById("jsOnClick").onclick = function(){
  alert("我用的js中的onclick属性写的");
};

// js属性不加on是错误的写法
document.getElementById("jsOnClick").onclick = function(){
  alert("我用的js中的onclick属性写的");
};

//第三种 在javascipt中，使用addEvenListener()方法
document.getElementById("addEventListener").addEventListener("click",function(){
  alert("我是addEventListener()方法监听的click事件，这个方法是不需要加on");
});

// 这是加了on的写法 是错误的  不会发生任何事件触发
document.getElementById("addEventListener1").addEventListener("onclick",function(){
  alert("这是错误的写法");
});

</script>

</body>
</html>